<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt"
uri="http://java.sun.com/jsp/jstl/fmt" %> <% String path =
request.getContextPath(); String basePath = request.getScheme() + "://" +
request.getServerName() + ":" + request.getServerPort() + path + "/";
//如果没有统计数据，重定向到HomeServlet获取数据
if (request.getAttribute("teaCount") == null) {
response.sendRedirect(request.getContextPath() + "/HomeServlet"); return; } %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <base href="<%=basePath%>" />
    <title>茶叶进销存系统 - 首页</title>
    <link rel="stylesheet" href="css/global.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      .dashboard-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }
      .dashboard-card {
        background: linear-gradient(135deg, var(--primary-color), #7a8d5d);
        color: white;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
        cursor: pointer;
      }
      .dashboard-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }
      .dashboard-card .icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.9;
      }
      .dashboard-card .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
      }
      .dashboard-card .description {
        font-size: 14px;
        opacity: 0.9;
        line-height: 1.4;
      }
      .welcome-section {
        background: linear-gradient(135deg, #f8f9f5, #e8f0e0);
        padding: 30px;
        border-radius: 8px;
        margin-bottom: 30px;
        text-align: center;
      }
      .welcome-title {
        font-size: 28px;
        color: var(--text-primary);
        margin-bottom: 10px;
      }
      .welcome-subtitle {
        font-size: 16px;
        color: var(--text-secondary);
      }
      .quick-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 30px;
      }
      .stat-card {
        background: white;
        padding: 20px;
        border-radius: 6px;
        text-align: center;
        border: 1px solid var(--border-color);
      }
      .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: var(--primary-color);
        margin-bottom: 5px;
      }
      .stat-label {
        font-size: 14px;
        color: var(--text-secondary);
      }

      .quick-actions {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
      }

      .quick-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        background: linear-gradient(135deg, var(--primary-color), #a8b86b);
        color: white;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s;
        min-width: 120px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(139, 158, 107, 0.3);
      }

      .quick-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(139, 158, 107, 0.4);
        background: linear-gradient(135deg, #7a8a5a, var(--primary-color));
      }

      .quick-action-btn i {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .quick-action-btn span {
        font-size: 14px;
        font-weight: 500;
      }

      .fade-in {
        animation: fadeIn 0.6s ease-in;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* 图表容器样式 */
      .chart-container {
        position: relative;
        height: 300px;
        margin-bottom: 20px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
      }

      .chart-summary {
        display: flex;
        justify-content: space-around;
        gap: 20px;
        margin-top: 20px;
      }

      .summary-item {
        flex: 1;
        text-align: center;
        padding: 20px;
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
        border-radius: 8px;
        border: 1px solid #dee2e6;
        position: relative;
        transition: all 0.3s ease;
      }

      .summary-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .summary-value {
        font-size: 28px;
        font-weight: bold;
        color: var(--primary-color);
        margin-bottom: 8px;
      }

      .summary-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 10px;
      }

      .summary-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: white;
      }

      .orders-icon {
        background: linear-gradient(135deg, #28a745, #20c997);
      }

      .purchases-icon {
        background: linear-gradient(135deg, #007bff, #6610f2);
      }
    </style>
  <body>
    <div class="app-container">
      <!-- 侧边栏 -->
      <div class="sidebar" id="sidebar">
        <div class="sidebar-logo" onclick="toggleSidebar()">
          <span><i class="fas fa-leaf tea-icon"></i> 茶叶进销存系统</span>
        </div>

        <div class="sidebar-menu">
          <div
            class="menu-item active"
            onclick="location.href='views/home.jsp'"
          >
            <i class="fas fa-home"></i>
            <span>系统首页</span>
          </div>
          <div class="menu-item" onclick="location.href='TeaServlet'">
            <i class="fas fa-coffee"></i>
            <span>茶叶管理</span>
          </div>
          <div class="menu-item" onclick="location.href='CategoryServlet'">
            <i class="fas fa-tags"></i>
            <span>分类管理</span>
          </div>
          <div class="menu-item" onclick="location.href='WarehouseServlet'">
            <i class="fas fa-boxes"></i>
            <span>仓库管理</span>
          </div>
          <div class="menu-item" onclick="location.href='OrderServlet'">
            <i class="fas fa-receipt"></i>
            <span>订单管理</span>
          </div>
          <div class="menu-item" onclick="location.href='LogisticsServlet'">
            <i class="fas fa-shipping-fast"></i>
            <span>物流管理</span>
          </div>
          <div class="menu-item" onclick="location.href='SupplierServlet'">
            <i class="fas fa-truck"></i>
            <span>供应商管理</span>
          </div>
          <div
            class="menu-item"
            onclick="location.href='<%=basePath%>purchase/list'"
          >
            <i class="fas fa-truck"></i>
            <span>采购管理</span>
          </div>
          <div class="menu-item" onclick="location.href='CustomerServlet'">
            <i class="fas fa-users"></i>
            <span>客户管理</span>
          </div>
          <div class="menu-item" onclick="location.href='AddressServlet'">
            <i class="fas fa-map-marker-alt"></i>
            <span>地址管理</span>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="navbar">
          <div class="navbar-left">
            <h3><i class="fas fa-home tea-icon"></i> 系统首页</h3>
          </div>
          <div class="navbar-right">
            <span
              ><i class="fas fa-user tea-icon"></i> 欢迎，${
              username}管理员</span
            >
            <button class="logout-btn" onclick="logout()">
              <i class="fas fa-sign-out-alt"></i> 退出
            </button>
          </div>
        </div>

        <!-- 欢迎区域 -->
        <div class="welcome-section fade-in">
          <h1 class="welcome-title">
            <i class="fas fa-leaf tea-icon"></i> 欢迎使用茶叶进销存管理系统
          </h1>
          <p class="welcome-subtitle">
            专业的茶叶库存管理解决方案，助您高效管理茶叶业务
          </p>
        </div>

        <!-- 功能模块卡片 -->
        <div class="dashboard-cards fade-in">
          <div class="dashboard-card" onclick="location.href='TeaServlet'">
            <div class="icon"><i class="fas fa-coffee"></i></div>
            <div class="title">茶叶管理</div>
            <div class="description">
              管理茶叶信息，包括茶叶的增删改查、图片上传等功能
            </div>
          </div>

          <div class="dashboard-card" onclick="location.href='CategoryServlet'">
            <div class="icon"><i class="fas fa-tags"></i></div>
            <div class="title">分类管理</div>
            <div class="description">管理茶叶分类，维护产品分类体系</div>
          </div>

          <div
            class="dashboard-card"
            onclick="location.href='WarehouseServlet'"
          >
            <div class="icon"><i class="fas fa-boxes"></i></div>
            <div class="title">仓库管理</div>
            <div class="description">管理仓库信息和库存，实时掌握库存状况</div>
          </div>

          <div class="dashboard-card" onclick="location.href='purchase/list'">
            <div class="icon"><i class="fas fa-shopping-cart"></i></div>
            <div class="title">采购管理</div>
            <div class="description">
              管理采购订单，跟踪采购流程和供应商关系
            </div>
          </div>

          <div class="dashboard-card" onclick="location.href='OrderServlet'">
            <div class="icon"><i class="fas fa-receipt"></i></div>
            <div class="title">订单管理</div>
            <div class="description">处理客户订单，跟踪订单状态</div>
          </div>

          <div
            class="dashboard-card"
            onclick="location.href='LogisticsServlet'"
          >
            <div class="icon"><i class="fas fa-shipping-fast"></i></div>
            <div class="title">物流管理</div>
            <div class="description">管理物流信息，跟踪货物运输状态</div>
          </div>

          <div class="dashboard-card" onclick="location.href='SupplierServlet'">
            <div class="icon"><i class="fas fa-truck"></i></div>
            <div class="title">供应商管理</div>
            <div class="description">管理供应商信息，维护供应商关系</div>
          </div>

          <div class="dashboard-card" onclick="location.href='CustomerServlet'">
            <div class="icon"><i class="fas fa-users"></i></div>
            <div class="title">客户管理</div>
            <div class="description">管理客户信息，维护客户关系</div>
          </div>

          <div class="dashboard-card" onclick="location.href='AddressServlet'">
            <div class="icon"><i class="fas fa-map-marker-alt"></i></div>
            <div class="title">地址管理</div>
            <div class="description">管理客户收货地址信息</div>
          </div>

<%--          <div--%>
<%--            class="dashboard-card"--%>
<%--            onclick="location.href='views/inventory/index.jsp'"--%>
<%--          >--%>
<%--            <div class="icon"><i class="fas fa-clipboard-list"></i></div>--%>
<%--            <div class="title">库存管理</div>--%>
<%--            <div class="description">实时监控库存状态，管理进出库记录</div>--%>
<%--          </div>--%>

          <div
            class="dashboard-card"
            onclick="location.href='views/purchase/financial-report.jsp'"
          >
            <div class="icon"><i class="fas fa-chart-line"></i></div>
            <div class="title">财务报表</div>
            <div class="description">查看采购财务数据，分析成本和趋势</div>
          </div>

          <div
            class="dashboard-card"
            onclick="location.href='views/reports/dashboard.jsp'"
          >
            <div class="icon"><i class="fas fa-tachometer-alt"></i></div>
            <div class="title">数据分析</div>
            <div class="description">业务数据分析，销售趋势和业绩报告</div>
          </div>

          <div
            class="dashboard-card"
            onclick="location.href='views/system/settings.jsp'"
          >
            <div class="icon"><i class="fas fa-cogs"></i></div>
            <div class="title">系统设置</div>
            <div class="description">系统参数配置，用户权限和安全设置</div>
          </div>
        </div>

        <!-- 快速统计 -->
        <div class="el-card fade-in">
          <div class="el-card__header">
            <span><i class="fas fa-chart-bar tea-icon"></i> 系统概览</span>
          </div>
          <div class="el-card__body">
            <div class="quick-stats">
              <div class="stat-card">
                <div class="stat-number">
                  ${teaCount != null ? teaCount : 0}
                </div>
                <div class="stat-label">茶叶品种</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${categoryCount != null ? categoryCount : 0}
                </div>
                <div class="stat-label">分类数量</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${warehouseCount != null ? warehouseCount : 0}
                </div>
                <div class="stat-label">仓库数量</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${orderCount != null ? orderCount : 0}
                </div>
                <div class="stat-label">订单总数</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${supplierCount != null ? supplierCount : 0}
                </div>
                <div class="stat-label">供应商数量</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${customerCount != null ? customerCount : 0}
                </div>
                <div class="stat-label">客户数量</div>
              </div>
              <div class="stat-card">
                <div class="stat-number">
                  ${purchaseCount != null ? purchaseCount : 0}
                </div>
                <div class="stat-label">采购单数</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近活动 -->
        <div class="el-card fade-in">
          <div class="el-card__header">
            <span><i class="fas fa-chart-line tea-icon"></i> 业务趋势</span>
          </div>
          <div class="el-card__body">
            <div class="chart-container">
              <canvas id="businessTrendChart" width="400" height="200"></canvas>
            </div>
            <div class="chart-summary">
              <div class="summary-item">
                <div class="summary-value">${recentOrders != null ? recentOrders : 0}</div>
                <div class="summary-label">本月订单</div>
                <div class="summary-icon orders-icon">
                  <i class="fas fa-shopping-cart"></i>
                </div>
              </div>
              <div class="summary-item">
                <div class="summary-value">${recentPurchases != null ? recentPurchases : 0}</div>
                <div class="summary-label">本月采购</div>
                <div class="summary-icon purchases-icon">
                  <i class="fas fa-truck"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速操作 -->
        <div class="el-card fade-in">
          <div class="el-card__header">
            <span><i class="fas fa-bolt tea-icon"></i> 快速操作</span>
          </div>
          <div class="el-card__body">
            <div class="quick-actions">
              <button
                class="quick-action-btn"
                onclick="location.href='TeaServlet?action=add'"
              >
                <i class="fas fa-plus"></i>
                <span>添加茶叶</span>
              </button>
              <button
                class="quick-action-btn"
                onclick="location.href='purchase/add'"
              >
                <i class="fas fa-shopping-cart"></i>
                <span>新建采购单</span>
              </button>
              <button
                class="quick-action-btn"
                onclick="location.href='OrderServlet?action=add'"
              >
                <i class="fas fa-receipt"></i>
                <span>创建订单</span>
              </button>
              <button
                class="quick-action-btn"
                onclick="location.href='views/inventory/index.jsp'"
              >
                <i class="fas fa-clipboard-list"></i>
                <span>库存盘点</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      let isCollapsed = false;
      // 退出登录
      function logout() {
        if (confirm("确定要退出登录吗？")) {
          location.href = "LogoutServlet";
        }
      }

      function toggleSidebar() {
        const sidebar = document.getElementById("sidebar");
        isCollapsed = !isCollapsed;
        sidebar.classList.toggle("collapsed", isCollapsed);
        localStorage.setItem("sidebarCollapsed", isCollapsed);
      }

      window.onload = function () {
        const savedState = localStorage.getItem("sidebarCollapsed") === "true";
        if (savedState) {
          document.getElementById("sidebar").classList.add("collapsed");
          isCollapsed = true;
        }

        // 初始化业务趋势图表
        initBusinessTrendChart();
      };

      function initBusinessTrendChart() {
        const ctx = document.getElementById('businessTrendChart').getContext('2d');

        // 模拟最近7天的数据
        const labels = [];
        const ordersData = [];
        const purchasesData = [];

        // 生成最近7天的日期标签
        for (let i = 6; i >= 0; i--) {
          const date = new Date();
          date.setDate(date.getDate() - i);
          labels.push(date.getMonth() + 1 + '/' + date.getDate());
        }

        // 获取当前数据
        const currentOrders = ${recentOrders != null ? recentOrders : 0};
        const currentPurchases = ${recentPurchases != null ? recentPurchases : 0};

        // 生成模拟的7天数据（基于当前月度数据）
        const avgOrdersPerDay = Math.max(1, Math.floor(currentOrders / 30));
        const avgPurchasesPerDay = Math.max(1, Math.floor(currentPurchases / 30));

        for (let i = 0; i < 7; i++) {
          // 添加一些随机波动
          const orderVariation = Math.floor(Math.random() * avgOrdersPerDay * 0.6) - avgOrdersPerDay * 0.3;
          const purchaseVariation = Math.floor(Math.random() * avgPurchasesPerDay * 0.6) - avgPurchasesPerDay * 0.3;

          ordersData.push(Math.max(0, avgOrdersPerDay + orderVariation));
          purchasesData.push(Math.max(0, avgPurchasesPerDay + purchaseVariation));
        }

        new Chart(ctx, {
          type: 'line',
          data: {
            labels: labels,
            datasets: [{
              label: '订单数量',
              data: ordersData,
              borderColor: '#28a745',
              backgroundColor: 'rgba(40, 167, 69, 0.1)',
              borderWidth: 3,
              fill: true,
              tension: 0.4,
              pointBackgroundColor: '#28a745',
              pointBorderColor: '#ffffff',
              pointBorderWidth: 2,
              pointRadius: 6,
              pointHoverRadius: 8
            }, {
              label: '采购数量',
              data: purchasesData,
              borderColor: '#007bff',
              backgroundColor: 'rgba(0, 123, 255, 0.1)',
              borderWidth: 3,
              fill: true,
              tension: 0.4,
              pointBackgroundColor: '#007bff',
              pointBorderColor: '#ffffff',
              pointBorderWidth: 2,
              pointRadius: 6,
              pointHoverRadius: 8
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'top',
                labels: {
                  usePointStyle: true,
                  padding: 20,
                  font: {
                    size: 12
                  }
                }
              },
              tooltip: {
                mode: 'index',
                intersect: false,
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                titleColor: '#ffffff',
                bodyColor: '#ffffff',
                borderColor: '#dee2e6',
                borderWidth: 1
              }
            },
            scales: {
              x: {
                display: true,
                title: {
                  display: true,
                  text: '日期',
                  font: {
                    size: 12
                  }
                },
                grid: {
                  display: false
                }
              },
              y: {
                display: true,
                title: {
                  display: true,
                  text: '数量',
                  font: {
                    size: 12
                  }
                },
                beginAtZero: true,
                grid: {
                  color: 'rgba(0, 0, 0, 0.1)'
                }
              }
            },
            interaction: {
              mode: 'nearest',
              axis: 'x',
              intersect: false
            },
            elements: {
              point: {
                hoverRadius: 8
              }
            }
          }
        });
      }
    </script>
  </body>
</html>
